<template >
  <div class="list-item">
    <div
      v-for="item in article"
      :key="item"
      class="text-item"
      @click="$router.push('/article/'+item.id)"
    >
      <el-card class="box-card">
        <div class="left-img">
          <img
            class="left-img"
            :src="item.imgSrc"
          >
        </div>
        <div class="right-content">
          <h4>{{item.title}}</h4>
          <el-divider></el-divider>
          <div
            class="article-content"
            v-html="item.content"
          > {{}} </div>
          <div class="article-msg-wrap">
            <div class="article-msg">
              <div class="icon">
                <span class="icon-img">
                  <img
                    src="https://www.tjcblog.com/zb_users/avatar/1.png"
                    alt=""
                  >
                </span>
                <span class="icon-text">张信凯</span>
              </div>
              <div class="date">
                <span class="date-icon"><i class="el-icon-date"></i></span>
                <span class="date-text">{{item.create_at}}</span>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      searchContent: '',
      article: []
    }
  },
  created () {
    this.getarticlelist()
  },
  methods: {
    async getarticlelist () {
      const res = await this.$http.get('/article/getarticlelist')
      this.article = res.data.data
      console.log(res)
    },
    onSubmit () {
    }
  }

}
</script>
<style lang="less" scoped>
.list-item {
  line-height: 24px;
  text-align: start;
  .el-card {
    width: 100%;
    margin-bottom: 15px;
  }
  .el-main {
    line-height: 24px;
  }
  .text-item {
    /deep/.el-card__body {
      padding: 13px;
      display: flex;
      .left-img {
        margin-right: 10px;
        img {
          width: 100%;
          height: 100%;
        }
        flex: 1;
      }

      .right-content {
        flex: 2;
        h4 {
          text-align: start;
          margin: 10px;
        }

        .el-divider {
          margin: 5px 0;
        }

        .article-content {
          font-size: 14px;
          line-height: 24px;
          margin-top: 12px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          margin-bottom: 40px;
        }
        position: relative;
        .article-msg-wrap {
          position: absolute;
          bottom: 0;
          .article-msg {
            font-size: 13px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            bottom: 0;
            .icon {
              display: flex;
              justify-content: space-around;
              align-items: center;
              margin-right: 10px;
              img {
                border-radius: 30px;
                width: 30px;
                height: 30px;
              }
              .icon-text {
                margin-left: 10px;
              }
            }

            .date {
              margin-left: 10px;
            }

            .comment-num {
              margin-left: 10px;
            }
          }
        }
      }
    }
  }
}
</style>
